import styles from './index.module.less';

const indexMap = {
  1:'三',
  2:'四',
  3:'五',
  4:'六',
  5:'七',
  6:'八',
  7:'九',
  8:'十',
  9:'十一',
  10:'十二',
  11:'十三',
  12:'十四'
 }

const arr = [
  '一、新增快递公司，在下拉列表中选择需要打印的快递公司，如图一、图二：',
  '二、点击快递公司列表右边的【增加自定义区】按钮，如图三：',
  '三、如果您事先已经登录抖店后台，请直接跳过该步骤，进入第四步，否则按图四指示，登录抖店后进入第四步：',
  '四、确保您看到的页面为图五所示，如果不是，请参照图五所示进入：',
  '五、点击图五所示右上角的【云模板编辑】，打开图六所示的页面：',
  `六、通过图六页面的下拉框，选择服务“${APP_TITLE}”，这里一定要注意，必须选择“${APP_TITLE}”，如图七所示，选择好后，点击【确定】按钮：`,
  '七、点击左侧菜单“商家自定义区”打开页面，如图八所示：',
  '八、点击右上角的【新建模板】按钮，开始新建自定义区模板，如图九所示，然后点击【新建】按钮：',
  '九、在打开的页面中点击左侧【打印项】按钮，如图十所示：',
  '十、中间区域会显示系统预置的打印项，我们在这里选择需要的打印项，例如“订单商品名称”，点击“订单商品名称”按钮即可，点击后，会在预览模板上显示，而且右侧会出现字体大小，区域大小调整项，可以通过页面的拖拽操作，选择该打印项的理想位置和大小，如图十一所示：',
  '十一、调整到理想状态后，点击右上角的【发布】按钮，完成一个自定义区模板的发布，如图十二所示：',
  `十二、回到${APP_TITLE}系统，点击快递列表右侧的操作按钮“关联自定义区”，如图十三所示：`,
  '十三、在弹出的页面中，选择刚才设置的抖店，然后自定义区域下拉列表就会出现刚刚创建的自定义区模板，选择完成后，点击【确定】按钮，完成设置，如图十四所示：'
]

export default () => {
 
  return <div style={{width: '800px', margin: '0 auto'}}>
      {
        arr.map((item,index)=>{
          if(index){
            return (<div key={item}>
              <div className={styles.textDesc}>{item}</div>
             <img className={styles.imgStyle} src={`https://imgniu.zhaojiafang.com/douyin-step${index+2}.png`} alt="" />
             <div className={styles.pictureDesc}>图{indexMap[index]}</div>
             </div>)
          }else{
            return (<div key={item}>
              <div className={styles.textDesc}>{item}</div>
              <img className={styles.imgStyle} src="https://imgniu.zhaojiafang.com/front-web/ERP/jdCloudExpotStep1.png" alt="" />
              <div className={styles.pictureDesc}>图一</div>
              <img className={styles.imgStyle} src="https://imgniu.zhaojiafang.com/douyin-step2.png" alt="" />
              <div className={styles.pictureDesc}>图二</div>
              <div className={styles.ps}>选择好后，点击【确定】按钮</div>
             </div>)
          }
        })
      }
  </div>
}